<template>
<div> 
 
    <span>数字:{{number}}</span>
    <button @click="number++">数字增加</button>
    </div>
</template>

<script>
import {ref, onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from 'vue';
   export default {
    
        name:  '',
        components: {},
        setup(){
            let number = ref(0);
            onBeforeMount(()=>{
                console.log('---onBeforeMount---');
                
            }),
            onMounted(()=>{
                console.log('--- onMounted---');
                
            }),
            onBeforeUpdate(()=>{
                console.log('---onBeforeUpdate---');
                
            }),
            onUpdated(()=>{
                console.log('---onUpdated---');
                
            }),
            onBeforeUnmount(()=>{
                console.log('---onBeforeUnmount---');
                
            }),
            onUnmounted(()=>{
                console.log('---onUnmounted---');
                
            })
            return{
                number,
            }
        },

        //#region 
        // beforeCreate() {
        //      console.log('执行了beforeCreate');
        // },
        // created(){
        //     console.log('执行了created');
        // },
        // beforeMount() {
        //     console.log('执行了beforeMounted');
        // },
        // mounted() {
        //     console.log('执行了mounted');
        // },
        // beforeUpdate() {
        //     console.log('执行了beforeUpdate');
        // },
        // updated(){
        //     console.log('执行了updated');
            
        // },
        // beforeUnmount(){
        //      console.log('执行了beforeUnmounted');
        // },
        // unmounted(){
        //     console.log('执行了mounted');
        // }
        //#endregion
   }
</script>

<style scoped>

</style>